page{
  background-color: #f3f3f3;
}
.topTabBar{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #f8f8f8;
  height: 80upx;
  display: flex;
  justify-content: space-around;
  .grid{
    width: 20%;
    height: 80upx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #444;
    font-size: 28upx;
    .text{
      height: 76upx;
      display: flex;
      align-items: center;
      &.on{
        color: #f06c7a;
        border-bottom: solid 4upx #f06c7a;
      }
    }

  }
}
.order-list{
  margin-top: 80upx;
  padding-top: 20upx;
  width: 100%;
  .list{
    width: 94%;
    margin: 0 auto;
    .onorder{
      width: 100%;
      height: 50vw;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      image{
        width: 20vw;
        height: 20vw;
        border-radius: 100%;
      }
      .text{
        width: 100%;
        height: 60upx;
        font-size: 28upx;
        color: #444;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .row{
      width: calc(100% - 40upx);
      padding: 10upx 20upx;
      border-radius: 10upx;
      background-color: #fff;
      margin-bottom: 20upx;
      .type{
        font-size: 26upx;
        color: #ec652f;
        height: 50upx;
        display: flex;
        align-items: center;
      }
      .order-info{
        width: 100%;
        display: flex;
        .left{
          flex-shrink: 0;
          width: 25vw;
          height: 25vw;
          image{
            width: 25vw;
            height: 25vw;
            border-radius: 10upx;
          }
        }
        .right{
          width: 100%;
          margin-left: 10upx;
          position: relative;
          .name{
            width: 100%;
            font-size: 28upx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .spec{
            color: rgba(255, 0, 0, 0.45);
            font-size: 22upx;
            font-weight: 600;
            padding-top: 10upx;
          }
          .price-number{
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            font-size: 22upx;
            color: #333;
            display: flex;
            align-items: flex-end;
            .price{
              font-size: 24upx;
              margin-right: 5upx;
            }

          }
        }
      }
      .detail{
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        height: 60upx;
        font-size: 26upx;
        .sum{
          padding: 0 8upx;
          display: flex;
          align-items: flex-end;
          .price{
            font-size: 30upx;
          }
        }

      }
      .btns{
        height: 80upx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        view{
          min-width: 120upx;
          height: 50upx;
          padding: 0 20upx;
          border-radius: 50upx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28upx;
          margin-left: 20upx;
        }
        .default{
          border: solid 1upx #ccc;
          color: #666;
        }
        .pay{
          border: solid 1upx #ec652f;
          color: #ec652f;
        }
      }
    }
  }
}
